<template>
  <f7-list media-list class="shared_song_box ">
    <f7-list-item link="#" :title="songData.songName ? songData.songName : songData.name" :subtitle="songData.sharedTime"
      :text="songData.description ? songData.description : '写点什么吧...'" @click="handleSongClick()"
      class="elevation-demo elevation-6 elevation-hover-24 elevation-pressed-12 elevation-transition">
      <div slot="media" class="media-div">
        <div class="img-cover">
          <svg-icon iconClass="shared_play_white" v-if="!isPlayingThis" />
          <svg-icon iconClass="shared_playing_white" v-else />
        </div>
        <img :src="songData.coverUrl ? songData.coverUrl : '/static/song_cover.jpg'" width="80" height="80"
          class="lazy lazy-fade-in demo-lazy" />
      </div>
      <img slot="after"
        :src="from === 'shared' ? (songData.headerImgUrl ? songData.headerImgUrl : '/static/user_header.jpg') : getUserInfo.headerImgUrl ? getUserInfo.headerImgUrl : '/static/user_header.jpg'"
        class="lazy lazy-fade-in demo-lazy user_avatar" />
    </f7-list-item>
  </f7-list>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters({
      getUserInfo: 'getUserInfo',
      nowSong: 'nowSong',
      getPlayState: 'getPlayState',
    }),
    isPlayingThis() {
      if (this.nowSong.songId == this.songData.songId && this.getPlayState) {
        return true;
      }
      else {
        return false;
      }
    },

  },
  props: {
    songData: {
      type: Object,
    },
    from: {
      type: String,
      default: '',
    }
  },
  watch: {
    songData: {
      handler(e) {
        console.log(e, 'songData....');
      },
      deep: true,
    },
    from: {
      handler(e) {
        console.log(e, 'songData....');
      },

    }
  },
  methods: {
    ...mapActions({
      playMust: 'playMust',
      sendandchangeMusic: 'sendandchangeMusic',
    }),
    handleSongClick() {
      if (
        this.getPlayState &&
        this.nowSong.songId === this.songData.songId
      ) {
      } else {
        this.sendandchangeMusic(Object.assign(this.songData, { name: this.songData.songName }))
        this.playMust()
      }

    },
  },
}
</script>

<style lang="scss" scoped>
.light {
  $spanColor: #212121;
  $spanSubColor: #666666;
  $backgroundSubColor: #d4c3c3;

  .list.media-list /deep/ ul {
    background-color: $backgroundSubColor;
    .item-title {
      color: $spanColor
    }

    .item-subtitle {
      color: $spanSubColor
    }

    .item-text {
      color: $spanSubColor
    }

  }
}

.dark {
  $spanColor: #ffffff;
  $spanSubColor: #f0f0f0;
  $backgroundSubColor: #592e2e;

  .list.media-list /deep/ ul {
    background-color: $backgroundSubColor;

    .item-title {
      color: $spanColor
    }

    .item-subtitle {
      color: $spanSubColor
    }

    .item-text {
      color: $spanSubColor
    }
  }
}

.shared_song_box {
  .media-div {
    position: relative;

    .img-cover {
      position: absolute;
      width: 100%;
      height: 0.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #000000;
      opacity: 0.5;

      .svg-icon {
        width: 0.4rem;
      }

      border-radius:50%;
    }

    img {
      border-radius: 50%;
    }
  }

  .user_avatar {
    border-radius: 50%;
    width: 0.2rem;
    height: 0.2rem;
  }

}
</style>
